<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-button type="success" @click="addRole">添加</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="roleId"
                label="编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="roleName"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="roleDesc"
                label="描述">
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="editRole(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="showRoleDialog(scope.row.roleId)">分配权限</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!-- 修改弹出层-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-upload
                class="avatar-uploader"
                action="/upload"
                :show-file-list="false"
        >
        </el-upload>

        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="editForm">
            <el-form-item label="名称">
                <el-input v-model="editForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="editForm.roleDesc"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
        </span>
    </el-dialog>
<!--    分配权限-->
    <el-dialog
            title="分配权限"
            :visible.sync="dialogVisible01"
            width="30%"
    >
        <el-tree
                :data="data"
                show-checkbox
                node-key="pId"
                ref="rootTree"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
    </el-dialog>
    <!--    添加弹出层-->
    <el-dialog
            title="提示"
            :visible.sync="adddialogVisible"
            width="30%"
            @close="dialogClose"
    >
        <!--:model:绑定表单数据-->
        <el-form  label-width="80px" :model="addForm" ref="addFormRef" >
            <el-upload
                    class="avatar-uploader"
                    action="/upload"
                    :show-file-list="false"
                    >
            </el-upload>
            <el-form-item label="名称" prop="name">
                <el-input v-model="addForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="name">
                <el-input v-model="addForm.roleDesc"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAdd">确认添加</el-button>
                      </span>
    </el-dialog>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            //修改的双向绑定
            editForm: {},
            addForm:{},
            dialogVisible01: false,
            //属性数据
            data: [],
            adddialogVisible:false,
            dialogVisible: false,
            checkIds: [],
            defaultProps: {
                children: 'children',
                label: 'pName'
            },
            roleId: 0,

        },
        created() {
            this.initTable();
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable()
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable()
            },
            dialogClose(){
                this.$refs.addFormRef.resetFields();
            },
            //确认分配角色
            qr() {
                //获取被选中的权限ids
                let checkIds = this.$refs.rootTree.getCheckedKeys();
                let halfIds = this.$refs.rootTree.getHalfCheckedKeys();
                let ids = checkIds.concat(halfIds);
                axios.post("/permission/qr?roleId=" + this.roleId + "&permissionIds=" + ids).then(resp => {
                    this.$message.success("分配成功");
                    this.dialogVisible01 = false;
                })
            },
            //添加
            addRole() {
                this.adddialogVisible =true;
                
            },
            //确认添加
            confirmAdd(){
                axios.post("/role/add",this.addForm).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("添加员工信息成功")
                        //关闭弹出层
                        this.adddialogVisible=false;
                        //重新加在表格数据
                        this.initTable();
                    }
                });
            },
            showRoleDialog(roleId) {
                this.roleId = roleId;
                this.dialogVisible01 = true;
                //1. 查询所有的权限
                //2. 当前角色具有的权限ID
                axios.get("/permission/list?roleId=" + roleId).then(resp => {
                    this.data = resp.data.data.firsts;
                    this.checkIds = resp.data.data.permissionIds;
                    console.log(resp);
                    //默认选中的树的数据
                    setTimeout(() => {
                        resp.data.data.permissionIds.forEach(value => {
                            console.log(value)
                            this.$refs.rootTree.setChecked(value, true, false);
                        })
                    }, 100)
                })
            },
            //修改
            editRole(row) {
                this.dialogVisible = true;
                this.editForm = row;

            },
            //确认修改
            confirmUpdate() {
                axios.post("/role/updata", this.editForm).then(result => {
                    console.log(this.editForm);
                    if (result.data.code === 200) {
                        this.$message.success("修改员工信息成功")
                        //关闭弹出层
                        this.dialogVisible = false;
                        //重新加在表格数据
                        this.initTable();
                    }
                })
            },
            del(row) {
                axios.get("role/delete?roleId=" + row.roleId).then(resp => {
                    console.log(row)
                    this.$message.success("删除成功");
                    this.initTable();
                })
            },
            initTable() {
                axios.post("/role/all?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    this.tableData = resp.data.data.list;
                    this.total = resp.data.data.total;
                });
            }
        }
    })
</script>
</html>
